<template>
  <a-tree-select
    v-model="value"
    style="width: 100%"
    :tree-data="treeData"
    tree-checkable
    :show-checked-strategy="SHOW_PARENT"
    search-placeholder="Please select"
    @change="onChange"
  />
</template>

<script>
import { TreeSelect } from 'ant-design-vue'
const SHOW_PARENT = TreeSelect.SHOW_PARENT

export default {
	props: {
	   treeDate: Array,
	   treeValue: Array
	},
	watch: {
	  treeDate: function (text) {
		  console.log(text)
	    this.treeData = text
	  },
	  treeValue: function (text) {
		  console.log(text)
	    this.value = text
	  }
	},
  data() {
    return {
      value: [],
			replaceFields: {
				children: 'children', title: 'Name', key: 'ID', value: 'ID', id: 'ID'
			},
      treeData: [],
      SHOW_PARENT
    }
  },
  methods: {
	  onChange(value) {
	  // console.log(value)
		this.value = value
		this.$emit('func', this.value)
	  },
	  onSearch() {
		console.log(...arguments)
	  },
	  onSelect() {
		console.log(...arguments)
	  }
  }
}
</script>
